<template>
	<view>
		<!-- 兑换 -->
		<cus-navbar ref="navbar" navbar :title="$t('index38')"></cus-navbar>
		<view class="main-padding">
			<view class="gap-30"></view>
			<view class="main-card">
				<view class="flex justify-between align-center">
					<!-- 兑换金额 -->
					<view class="size-28">{{$t('index75')}}</view>
					<!-- 金额： -->
					<view class="color-71 size-24">{{$t('index76')}}{{balance}}</view>
				</view>
				<view class="with-card flex justify-between align-center mt-24">
					<!-- 请输入兑换金额 -->
					<input type="digit" v-model="amount" :placeholder="$t('index77')" placeholder-class="color-71 size-26" class="flex-1 size-26" />
					<picker :range="range" range-key="name" @change="pickerChange">
						<view class="flex align-center">
							<view class="size-26">{{range[current].name}}</view>
							<image src="../../static/imgs/18_1.png" class="img-20 ml-10"></image>
						</view>
					</picker>
					<!-- <view class="flex align-center">
						<view class="size-26">{{range[current].name}}</view>
					</view> -->
				</view>
				<view class="with-card flex justify-between align-center mt-24">
					<view class="flex-1 size-26">{{total}}</view>
					<view class="size-26">AFH</view>
				</view>
			</view>
			<view class="gap-300"></view>
			<!-- 确认 -->
			<button class="main-btn" @click="submit">{{$t('index73')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				current:0,
				balance:0,
				rate:0,
				amount:''
			}
		},
		computed:{
			range(){
				return [
					{name:'USDT',value:1},
					{name:this.$t('index33'),value:2}
				]
			},
			total(){
				let amount = this.amount||0
				return this.$utils.bcmul(amount, this.rate)
			}
		},
		onLoad(){
			this.loadData()
		},
		methods:{
			loadData(){
				this.$api.post('/data/api.auth.invest/exchangeInfo',{
					type:this.range[this.current].value
				}).then(res=>{
					this.balance = res.info.balance
					this.rate = res.info.rate
				})
			},
			pickerChange(e){
				if(this.current==e.detail.value)return
				this.current = e.detail.value
				this.amount = ''
				this.loadData()
			},
			submit(){
				if(!this.amount){
					uni.showToast({
						title:this.$t('index77'),// 请输入兑换金额
						icon:"none"
					})
					return
				}
				this.$api.post('/data/api.auth.invest/exchange',{
					type: this.range[this.current].value,
					price: this.amount
				}).then(res=>{
					uni.showToast({
						title:this.$t('index78')// 兑换成功
					})
					setTimeout(()=>{
						this.$refs.navbar.navBack()
					},1200)
				})
			}
		}
	}
</script>

<style lang="scss">
.with-card{
	padding: 30rpx;
	border-radius: 20rpx;
	background-color: #15151B;
}
</style>